<template>
  <view class="product-card" @click="navigateToDetail">
    <image :src="product.image" mode="aspectFill" class="product-image"></image>
    <view class="product-info">
      <text class="product-name">{{ product.name }}</text>
      <view class="product-price">
        <text class="price">¥{{ product.price }}</text>
        <text class="original-price" v-if="product.originalPrice">¥{{ product.originalPrice }}</text>
      </view>
      <view class="product-tags" v-if="product.tags && product.tags.length">
        <uni-tag
          v-for="(tag, index) in product.tags"
          :key="index"
          :text="tag"
          size="small"
          type="warning"
          :inverted="true"
        ></uni-tag>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ProductCard',
  props: {
    product: {
      type: Object,
      required: true,
      default: () => ({
        id: '',
        name: '',
        price: 0,
        originalPrice: 0,
        image: '',
        tags: []
      })
    }
  },
  methods: {
    navigateToDetail() {
      if (!this.product.id) {
        uni.showToast({
          title: '商品信息不完整',
          icon: 'none'
        })
        return
      }
      
      uni.navigateTo({
        url: `/pages/product/detail/index?id=${this.product.id}`,
        fail: (err) => {
          console.error('跳转失败:', err)
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.product-card {
  background-color: #ffffff;
  border-radius: 12rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .product-image {
    width: 100%;
    height: 300rpx;
  }

  .product-info {
    padding: 20rpx;

    .product-name {
      font-size: 28rpx;
      color: #333;
      @include multi-ellipsis(2);
      margin-bottom: 10rpx;
    }

    .product-price {
      display: flex;
      align-items: baseline;
      margin-bottom: 10rpx;

      .price {
        font-size: 32rpx;
        color: #ff5500;
        font-weight: bold;
      }

      .original-price {
        font-size: 24rpx;
        color: #999;
        text-decoration: line-through;
        margin-left: 10rpx;
      }
    }

    .product-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10rpx;
    }
  }
}
</style> 